<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      box-shadow: 0 0 40px #333;
    }
  </style>
</head>

<body>
  <canvas id="canvas1" width="300" height="300">
    你的浏览器太low了~
  </canvas>
  <canvas id="canvas2" width="300" height="300">
    你的浏览器太low了~
  </canvas>
  <canvas id="canvas3" width="300" height="300">
    你的浏览器太low了~
  </canvas>
  <canvas id="canvas4" width="300" height="300">
    你的浏览器太low了~
  </canvas>
  <canvas id="canvas5" width="300" height="300">
    你的浏览器太low了~
  </canvas>
  <canvas id="canvas6" width="300" height="300">
    你的浏览器太low了~
  </canvas>
  <script>

    window.onload = function () {
      var canvas1 = document.getElementById('canvas1')
      var canvas2 = document.getElementById('canvas2')
      var canvas3 = document.getElementById('canvas3')
      var canvas4 = document.getElementById('canvas4')
      var canvas5 = document.getElementById('canvas5')
      var canvas6 = document.getElementById('canvas6')
      console.info();
      if (canvas1.getContext) {
        // 目标图像：画布上已经存在的，即当前的矩形
        // 源图像：即将画到画布上的图像，后画的，即当前的圆


        // 1、图像组合
        // source-over：重叠区域，源图像覆盖目标图像
        // destination-over：重叠区域，目标图像覆盖源图像
        var ctx1 = canvas1.getContext('2d');
        ctx1.fillStyle = 'red';
        ctx1.fillRect(20, 20, 50, 50)

        ctx1.globalCompositeOperation = 'source-over';
        ctx1.fillStyle = 'green';
        ctx1.arc(70, 70, 30, 0, Math.PI * 2)
        ctx1.fill()


        ctx1.fillStyle = 'red';
        ctx1.fillRect(120, 120, 50, 50)

        ctx1.globalCompositeOperation = 'destination-over';
        ctx1.fillStyle = 'green';
        ctx1.arc(170, 170, 30, 0, Math.PI * 2)
        ctx1.fill()

        // 2、图像组合
        // source-atop：显示目标图像，重叠区域，源图像覆盖目标图像，下面两个无法同事展示效果
        // destination-atop：显示源图像，重叠区域，目标图像覆盖源图像
        var ctx2 = canvas2.getContext('2d');
        // ctx2.fillStyle = 'red';
        // ctx2.fillRect(20, 20, 50, 50)

        // ctx2.globalCompositeOperation = 'source-atop';
        // ctx2.fillStyle = 'green';
        // ctx2.arc(70, 70, 30, 0, Math.PI * 2)
        // ctx2.fill()

        ctx2.fillStyle = 'red';
        ctx2.fillRect(120, 120, 50, 50)

        ctx2.globalCompositeOperation = 'destination-atop';
        ctx2.fillStyle = 'green';
        ctx2.arc(170, 170, 30, 0, Math.PI * 2)
        ctx2.fill()



        // 3、图像组合：globalCompositeOperation，只显示与目标图像重叠的部分
        // source-in：目标图像不显示，下面两个无法同事展示效果
        // destination-in：目标图像显示

        var ctx3 = canvas3.getContext('2d');
        ctx3.fillStyle = 'red';
        ctx3.fillRect(20, 20, 50, 50)

        ctx3.globalCompositeOperation = 'source-in';
        ctx3.fillStyle = 'green';
        ctx3.arc(70, 70, 30, 0, Math.PI * 2)
        ctx3.fill()


        // ctx3.fillStyle = 'red';
        // ctx3.fillRect(120, 120, 50, 50)

        // ctx3.globalCompositeOperation = 'destination-in';
        // ctx3.fillStyle = 'green';
        // ctx3.arc(170, 170, 30, 0, Math.PI * 2)
        // ctx3.fill()


        // 4、图像组合
        // source-out：显示源图像，除掉重叠部分
        // destination-out：显示目标图像，除掉重叠部分
        var ctx4 = canvas4.getContext('2d');
        ctx4.fillStyle = 'red';
        ctx4.fillRect(20, 20, 50, 50)

        ctx4.globalCompositeOperation = 'destination-out';
        ctx4.fillStyle = 'green';
        ctx4.arc(70, 70, 30, 0, Math.PI * 2)
        ctx4.fill()

        // 5、图像组合
        // lighter：显示源图像 + 目标图像。
        // copy: 忽略目标图像
        var ctx5 = canvas5.getContext('2d');
        ctx5.fillStyle = 'red';
        ctx5.fillRect(20, 20, 50, 50)

        ctx5.globalCompositeOperation = 'lighter';
        ctx5.fillStyle = 'green';
        ctx5.arc(70, 70, 30, 0, Math.PI * 2)
        ctx5.fill()


        // 6、图像组合
        // xor： 异或操作对源图像与目标图像进行组合
        var ctx6 = canvas6.getContext('2d');
        ctx6.fillStyle = 'red';
        ctx6.fillRect(20, 20, 50, 50)

        ctx6.globalCompositeOperation = 'xor';
        ctx6.fillStyle = 'green';
        ctx6.arc(70, 70, 30, 0, Math.PI * 2)
        ctx6.fill()

      } else {
        alert('你的浏览器太low了~')
      }
    }
  </script>

</body>

</html>